import React, { useEffect, useState } from 'react';
import { Button, Space, Switch, Table, Modal, Drawer, Form, Input, Select, message } from 'antd';
import * as salary from '../../../api/salary'
import { MoneyCollectOutlined } from '@ant-design/icons';
import { wrap } from 'module';

function Settings(props: any) {
    interface DataType {
        tname: string
        ttime: string;
        title: string;
        tstate: string;
        id: string;
    }
    // 设置抽屉开关
    const [open, setOpen] = useState(false);
    // 设置添加编辑开关
    const [flag, setFlag] = useState(true)
    // 开启抽屉
    let onOpen = () => {
        setOpen(true)
    }
    // 关闭抽屉
    let onClose = () => {
        setOpen(false)
        setFlag(true)
        // form.setFieldsValue({ formwork: '', month: '', affirm: '', num: '', provide: '', providetime: '' })
    }
    // 创建列表渲染数据
    const [tableData, setTableData] = useState<DataType[]>([])
    // 工资单列表
    let userlist = async () => {
        var res = await salary.settings_list()
        setTableData(res.data.data)

    }
    useEffect(() => {
        userlist()
    }, [])
    // 状态点击按钮
    let onchange = async (bol: Boolean, item: any) => {
        let { tstate, ...value } = item
        console.log(bol);
        tstate = bol ? "1" : "0"
        var res = await salary.settings_edit({ tstate, ...value })
        console.log(res);
        userlist()
    }
    // 表单验证成功
    let onFinish = async (values: any) => {
        if (flag) {
            var res = await salary.settings_add(values)
            userlist()
            message.success('新增成功', 2, onClose)
        } else {
            console.log(flag)
            let newobj = { id, ...values }
            var res = await salary.settings_edit(newobj)
            userlist()
            message.success('修改成功', 2, onClose)
        }
    }
    // 表单验证失败
    let onFinishFailed = (errorInfo: any) => {
        if (flag) {
            message.error('新增失败', 2, onClose)
        } else {
            message.error('编辑失败', 2, onClose)
        }

    }
    // 保存id
    const [id, setId] = useState()
    // 编辑模板
    var [form] = Form.useForm()
    let onEdit = (item: any) => {
        console.log(item)
        setOpen(true)
        setFlag(false)
        setId(item.id)
        form.setFieldsValue(item)
        userlist()
    }
    // 删除
    let onDelete = async (id: any) => {
        console.log(id)
        var res = await salary.settings_delete(id)
        console.log(res)
        userlist()
        message.success('删除成功', 2)
    };
    return (
        <div className='settings'>
            <div style={{ width: '100%', padding: ' 0 0 0 20px', boxSizing: 'border-box', borderBottom: '1px solid #ddd' }}>
                <h3>工资发放</h3>
            </div>
            <Space style={{ margin: 20 }}>
                <Button type="primary" onClick={onOpen}>增加</Button>
            </Space>
            <div style={{ width: '1300px', margin: 'auto', display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between' }}>
                {
                    tableData.map((item, index) => {
                        return (
                            <div key={index} style={{ width: '600px', border: '1px solid #bbb', marginTop: '20px', borderRadius: '10px' }}>
                                <div className='up' style={{ display: 'flex', marginTop: '20px' }}>
                                    <div className='left' style={{ width: '150px', textAlign: 'center' }}><MoneyCollectOutlined style={{ color: '#3399FF', fontSize: '60px' }} /></div>
                                    <div className='center' style={{ flex: 1 }}>
                                        <h2 style={{ color: '#3399FF', margin: 0 }}>{item.title}</h2>
                                        <p style={{ color: '#657180' }}>薪资方案:{item.tname}</p>
                                        <p style={{ color: '#657180' }}>创建时间:{item.ttime}</p>
                                    </div>
                                    <div className='right' style={{ width: '100px', textAlign: 'center' }}><Switch checked={item.tstate == '0' ? false : true} onChange={(checked) => { onchange(checked, item) }} /></div>
                                </div>
                                <div className='down'>
                                    <span style={{ display: 'inline-block', margin: '10px 30px', color: '#3399FF' }} onClick={() => { onEdit(item) }}>编辑</span><span style={{ display: 'inline-block', margin: '10px 30px', color: '#FF3300' }} onClick={() => { onDelete(item) }}>删除</span>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
            <Drawer title="设置" placement="right" onClose={onClose} open={open}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label=" 模板名"
                        name="title"
                        rules={[{ required: true, message: '请输入' }]}
                    >
                        <Input disabled={!flag} />
                    </Form.Item>
                    <Form.Item
                        label="方案"
                        name="tname"
                        rules={[{ required: true, message: '请输入' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="创建时间"
                        name="ttime"
                        rules={[{ required: true, message: '请输入' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
        </div>
    );
}

export default Settings;